<template>
  <div class="wrapper">
    <div class="stage">
      <vue-baberrage
        ref="baberrage"
        :lanesCount="30"
        :boxHeight="stageHeight"
        :isShow="barrageIsShow"
        :barrageList="barrageList"
        :loop="barrageLoop"
        :maxWordCount="60"
        :messageHeight="60"
        :hoverLanePause="hoverLanePause"
      >
        <template v-slot:default="slotProps">
          <div class="custom-item">
            <a-avatar :style="{ verticalAlign: 'middle' }" :src="slotProps.item.avatar" />
            <span :style="{ verticalAlign: 'middle' }" class="custom-text">{{slotProps.item.msg}}</span>
          </div>
        </template>
      </vue-baberrage>
    </div>
    <div class="qr-code">
      <img src="../../assets/qr_code.jpg" width="258" height="258">
    </div>
  </div>
</template>

<script>
  import { MESSAGE_TYPE } from 'vue-baberrage'
  import { getBless } from '@/api/user'
  export default {
    name: 'FullScreen',
    data () {
      return {
        msg: `Hello World!vue-baberrage`,
        position: 'normal',
        barrageIsShow: true,
        stageHeight: 800,
        boxWidth: 375,
        placeStyle: 'normal',
        currentId: 0,
        barrageLoop: false,
        hoverLanePause: true, // 鼠标移动到上面的时候 会暂停泳道滚动
        barrageList: [],
        styleArray: ['red', 'blue', 'green', 'yellow'],
        timer: null,
        oArr: {}
      }
    },
    mounted () {
      this.timer = setInterval(this.getBlessMsg, 1500)
    },
    methods: {
      getBlessMsg () {
        getBless().then(res => {
          const data = {}
          if (res.result.data.length !== 0) {
            this.barrageIsShow = true
            data['id'] = res.result.data[0].id
            data['msg'] = res.result.data[0].content
            data['avatar'] = res.result.data[0].avatar
            data['type'] = MESSAGE_TYPE.NORMAL
            data['barrageStyle'] = this.styleArray[Math.floor(Math.random() * this.styleArray.length)]
            data['time'] = this.randomNum(3, 15)
            this.barrageList.push(data)
          }
        })
      },
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min)) + min
      }
    }
  }
</script>

<style scoped>
  .wrapper {
    height: 100vh;
    background: #000;
    background: url('../../assets/100.jpg') center no-repeat;
    background-size: cover;
  }
  /deep/ .blue {
    font-size: 30px;
  }
  .demo-control {
    position: absolute;
    bottom: 0;
    z-index: 9999;
  }
  /deep/.baberrage-item .custom-item {
    height:  50px;
    line-height: 50px;
    padding: 0 10px;
  }
  .custom-item .custom-text {
    font-size: 20px;
    color: #fff;
    margin-left: 10px;
  }
  /deep/.custom-item .ant-avatar {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  /deep/.baberrage-item.red {
    border-radius: 5px;
    background: rgba(230, 143, 186, .6);
    color: #fff;
    box-shadow: 0 0 10px #fff;
  }
  /deep/.baberrage-item.blue {
    border-radius: 5px;
    background: rgba(129, 7, 1, .6);
    color: #fff;
    box-shadow: 0 0 10px #fff;
  }
  /deep/.baberrage-item.green {
    border-radius: 5px;
    background: rgba(0, 193, 173, .6);
    color: #fff;
    box-shadow: 0 0 10px #fff;
  }
  /deep/.baberrage-item.yellow {
    border-radius: 5px;
    background: rgba(227, 198, 138, .6);
    color: #810701;
    box-shadow: 0 0 10px #fff;
  }
  .qr-code {
    position: fixed;
    bottom: 10px;
    right: 10px;
    opacity: .9;
  }
</style>
